import React from 'react';
import { Component } from 'react';
import { Link } from 'react-router';
// import Order from './order/Order.jsx';
// import Evaluate from './evaluate/Evaluate.jsx';
// import Seller from './seller/Seller.jsx';


import { NavBar, Icon, Tabs, List, WhiteSpace  } from 'antd-mobile';

import { url } from 'root_path/util/url.js';

require('./Shop.less');

export default class Shop extends Component {
    constructor() {
        super();
    }
    render() {
        var shop = {
            name:"杨明宇黄焖鸡",
            logoSrc: "shop_logo.png",
            inf: "评价4.7 月售1895单 蜂鸟专送约27分钟",
            redEnvelopes: 8,
            redEnvelopesType: "无门槛",
            discount: "新用户下单立减25元(不与其他活动同享)"
        }
        const tabs = [
            { title: '点餐' },
            { title: '评价' },
            { title: '商家' },
        ];
        return (
            <div className="shop_wrapper">
                <NavBar mode="light" icon={<Link to={url.index}><Icon type="left" /></Link>}/>
                <div className="shop_logo small center"><img src={`client/images/${shop.logoSrc}`}></img></div>
                <WhiteSpace size="lg" />
                <div className="shop_name big center">{shop.name}</div>
                <WhiteSpace size="sm" />
                <div className="shop_inf small center">{shop.inf}</div>
                <WhiteSpace size="xs" />
                <div className="shop_red_envelopes small center">红包￥{shop.redEnvelopes}</div>
                <WhiteSpace size="xs" />
                <div className="shop_discount small center">{shop.discount}</div>
                <WhiteSpace size="xs" />

                <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                        Content of first tab
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                        Content of second tab
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                        Content of third tab
                    </div>
                </Tabs>
            </div>
        );
    }
}